<template>
  <div class="m-wangEditor">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <!-- @onDestroyed="handleDestroyed" -->
    <Editor
      v-model="valueHtml"
      class="editor-content'"
      style="height: 300px; overflow-y: hidden"
      :default-config="editorConfig"
      :mode="mode"
      @on-created="handleCreated"
    />
  </div>
</template>
<script lang="ts" setup>
// @ts-ignore 引入 wangEditor
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import {
  onBeforeUnmount,
  onMounted,
  watch,
  shallowRef,
  ref,
  computed,
} from "vue";
// @ts-ignore
import { getToken } from "@/utils/auth";
// @ts-ignore
import axios from "axios";
let editors = null;
// @ts-ignore
let url = import.meta.env.VITE_APP_BASE_API;
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const toolbarConfig = {};

const editorConfig = {
  placeholder: "请输入内容...",
uploadImgMaxLength :9, 
  MENU_CONF: {
    // 配置上传图片
    uploadImage: {
      // 自定义上传
      async customUpload(file, insertFn) {
        const targetUrl = `${url}/common/upload`;
        // 创建FormData对象
        const formData = new FormData();
        formData.append("file", file);

        try {
          const response = await axios.post(targetUrl, formData, {
            //  自定义请求头
            headers: {
              "Content-Type": "multipart/form-data",
              Authorization: "Bearer " + getToken(),
            },
          });
          console.log(response, "--response---");
          if (response.data && response.data.code === 200) {
            insertFn(response.data.fileInfo.url,);
          }else{
            // console.log(response.data.msg)
          }
        } catch (error) {
          // 处理请求错误

          console.log(error);
        }
      },
    },
    // 配置上传视频
    uploadVideo:{
      // 自定义上传
      async customUpload(file, insertFn) {
        const targetUrl = `${url}/common/upload`;
        // 创建FormData对象
        const formData = new FormData();
        formData.append("file", file);
        try {
          const response = await axios.post(targetUrl, formData, {
            //  自定义请求头
            headers: {
              "Content-Type": "multipart/form-data",
              Authorization: "Bearer " + getToken(),
            },
          });
          if (response.data && response.data.code === 200) {
            insertFn(response.data.fileInfo.url,);
          }else{
            // console.log(response.data.msg)
          }
        } catch (error) {
          // 处理请求错误

          console.log(error);
        }
      },
    }
  },
};

// 上传图片
const uploadImg = (file, insertFn) => {
  //
};

// 内容 HTML
const mode = ref("default");
let emit = defineEmits(["update:modelValue"]);
let props = defineProps({
  modelValue: String,
  defVal: {
    type: String,
    default: "",
  },
});

const getEditorData = () => {
  // 通过代码获取编辑器内容
  let data = editors.txt.html();
  alert(data);
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    // 防止富文本内容为空时，校验失败
    if (editorRef.value.isEmpty()) val = "";
    emit("update:modelValue", val);
  },
});

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  // 调用销毁 API 对当前编辑器实例进行销毁
  const editor = editorRef.value;
  if (editor == null) {
    return;
  }
  editor.destroy();
});
</script>
<style lang="scss" scoped>
.m-wangEditor {
  z-index: 99;
  width: 100%;
  border: 1px solid #cccccc;
  .editor-toolbar {
    border-bottom: 1px solid #cccccc;
  }
  .editor-content {
    overflow-y: hidden;
  }
}
</style>
